<template>
  <div class="custom-admin-list" v-loading="loading" element-loading-text="加载中">
    <el-card class="custom-box-card">
      <div class="custom-header">
        <span class="title">
          演出分类列表
        </span>
      </div>
      <!-- 搜索 -->
      <div class="custom-form-search">
        <el-form @submit.prevent.stop :inline="true" size="mini">
          <el-form-item label="分类名称">
            <el-input v-model="search.type">
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchSubmit" icon="el-icon-search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="list-table-page">
        <div class="list-table">
          <el-table border :data="list" style="width: 100%" highlight-current-row>
            <el-table-column type="index" label="#"></el-table-column> <!-- 序号 -->
            <el-table-column label="分类名称">
              <template slot-scope="{row}">
                {{  row.type  }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{row}">
                <el-button-group>
                  <el-tooltip content="编辑" placement="top">
                    <el-button     icon="el-icon-edit-outline" @click="$goto({path:'/admin/performanceTypeupdt',query:{id:row.id } })" type="success"
                        size="mini"
                        style="background-color: rgb(147 152 154); border-color: rgb(147 152 154);"></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button   icon="el-icon-remove"
                        type="danger"
                        size="mini" @click="deleteItem(row)" style="background-color: rgb(229 79 110); border-color: rgb(229 79 110);">
                    </el-button>
                  </el-tooltip>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="custom-pagination" style="margin-top: 10px;text-align: center">
          <el-pagination
              @current-change="loadList"
              :current-page="page"
              :page-size="pagesize"
              @size-change="sizeChange"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount">
          </el-pagination>
        </div>
      </div>




    </el-card>
  </div>
</template>

<style type="text/scss" scoped lang="scss" >

.custom-admin-list {
.custom-box-card {
.custom-header {
  background: #7fabbe;
  margin: 15px;
  color: #fdfcfc;
  padding: 15px 20px;
  font-weight: bold;
  letter-spacing: 9px;
  border-radius: 8px;
}

.custom-form-search {
  padding-left: 20px;
  padding-top: 15px;
  margin-bottom: 20px;
  border-radius: 4px;

.el-form-item__label {
  color: #333;
  font-weight: bold;
}

.el-button {
  background-color: #659ab1;
  color: #fff;
&:hover {
   background-color: #b3cdd8;
   border: #b3cdd8;
 }
}
}

.list-table-page {
.list-table {
  padding: 0 20px;

.el-table__header-wrapper {
  background-color: #f5f7fa;
}

.el-table__row {
&:hover {
   background-color: #f0f0f0;
 }
}
}

.custom-pagination {
  text-align: center;
  margin-top: 20px;
  padding:0 20px;

.el-pagination__total {
  font-size: 14px;
  color: #666;
}

.el-pagination__sizes .el-select-dropdown__item {
  font-size: 14px;
}
}
}
}
}
.sousuo {
  width: 100%;
}
.anniu
{
  padding-top: 2.5%;
}

</style>
<script>
import api from '@/api';
import { remove , checkIssh } from '@/utils/utils';
import { extend } from '@/utils/extend';
import objectDiff from 'objectdiff';


/**
 * 后台列表页面
 */
export default {
  data() {
    return {

      loading:false,
      list:[],
      search:{
        type:'',
      },
      total:{},
      page:1, // 当前页
      pagesize:10, // 页大小
      totalCount:0, // 总行数


    }
  },
  watch: {},
  computed: {},
  methods: {
    searchSubmit(){
      this.setSearchParamsToCookie();
      this.loadList(1);
    },

    sizeChange(e){
      this.pagesize = e;
      this.setSearchParamsToCookie();
      this.loadList(1);
    },
    checkIssh,

    loadList( page ){
      // 防止重新点加载列表
      if(this.loading)return;
      this.loading = true;
      this.page = page;
      // 从 Cookie 中获取筛选条件
      var filter = this.getSearchParamsFromCookie();
      console.log('LoadList - Filter from Cookie:', filter); // 打印筛选条件
      filter.page = page.toString();
      filter.pagesize = this.pagesize.toString();

      this.$post(api.performanceType.list , filter).then(res=>{
        this.loading = false;
        if(res.code == api.code.OK)
        {
          extend(this , res.data);
        }else{
          this.$message.error(res.msg);
        }
      }).catch(err=>{
        this.loading = false;
        this.$message.error(err.message);
      });
    },
    // 删除某行方法
    deleteItem( row ){
      this.$confirm('确定删除数据？' , '提示',{ // 弹出 确认框提示是否要删除
        type: 'warning'
      }).then(()=>{// 确定操作

        this.loading = true; // 滚动条
        this.$post(api.performanceType.delete , {// 提交后台
          id:row.id
        }).then(res=>{
          this.loading = false;
          if(res.code != api.code.OK){
            this.$message.error(res.msg);
          }else{
            remove(this.list , row);
          }
        }).catch(err=>{ // 访问网络错误
          this.loading = false;
          this.$message.error(err.message)
        })
      }).catch(()=>{
        // 取消操作
      })
    },
    setSearchParamsToCookie() {
      const searchParams = {
        number: this.search.number,
        name: this.search.name,
        month: this.search.month,
        page: this.page,
        pagesize: this.pagesize,
        type: this.search.type
      };
      this.setCookie('searchParams', JSON.stringify(searchParams), 1); // 1表示过期时间1天
      console.log('SetSearchParamsToCookie - Search Params:', searchParams); // 打印存储的筛选条件
    },

    getSearchParamsFromCookie() {
      const cookieValue = this.getCookie('searchParams');
      return cookieValue ? JSON.parse(cookieValue) : {};
    },

    setCookie(name, value, days) {
      var expires = "";
      if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
      }
      document.cookie = name + "=" + (value || "") + expires + "; path=/";
    },

    getCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
      }
      return null;
    }

  },
  // beforeRouteUpdate(to,form,next){
  //   extend(this.search , to.query)
  //   this.loadList(1);
  //   next();
  // },
  created() {
    const searchParams = this.getSearchParamsFromCookie();
    console.log('Created - Search Params from Cookie:', searchParams); // 打印从 Cookie 中读取的筛选条件
    extend(this.search, searchParams);
    this.page = searchParams.page ? Math.floor(searchParams.page) : 1;
    this.pagesize = searchParams.pagesize ? Math.floor(searchParams.pagesize) : 10;
    this.loadList(this.page);
  },
  mounted() {
    this.setSearchParamsToCookie();
  },
  destroyed() {
  }
}
</script>
